<template>
	<view class="container">
		<!-- <u-navbar id="navBar" :autoBack="true" :safeAreaInsetTop="true" :placeholder="true" :fixed="true">
			<view class="u-nav-slot" slot="left">
				预约服务
			</view> 
		</u-navbar> -->
		<u-sticky>
			<u-subsection id="subsection" :list="list" :current="curNow" @change="sectionChange"></u-subsection>
		</u-sticky>
		<view class="main">
			<shop-card v-for="item in cardList" :key="item.id" :info="item" @click="subscribeInfo"
				@subscribe-btn="subscribe"></shop-card>
		</view>
		<footer-tab-bar></footer-tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['推荐', '美容', '美发'],
				cardList: [{
						id: 1,
						imgUrl: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						title: '资深店长-精致烫发',
						content: '仅售300元，价值600元【资深店长】',
						originalPrice: 600,
						presentPrice: 300,
						sold: 100,
					},
					{
						id: 2,
						imgUrl: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						title: '技术总监-精致剪发',
						content: '仅售80元，价值170元【技术总监】',
						originalPrice: 170,
						presentPrice: 80,
						sold: 8,
					},
					{
						id: 3,
						imgUrl: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						title: '技术学徒-一般剪发',
						content: '仅售30元，价值50元【技术学徒】',
						originalPrice: 50,
						presentPrice: 30,
						sold: 688,
					},
				],
				curNow: 0,
			}
		},
		onShow() {
			uni.hideHomeButton()
		},
		mounted() {},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
			// card 详情
			subscribeInfo(data) {
				console.log('详情', data)
				uni.navigateTo({
					url: '/pages/subscribe/shopInfo?shopId=1',
				});
			},
			// 预约 
			subscribe(data) {
				console.log('预约', data)
				// 立即预约
				uni.navigateTo({
					url: `/pages/subscribe/InitiateOrder?projInfo=${JSON.stringify({
						id:data.id,
						title:data.title,
						price:data.presentPrice,
					})}`,
				});
			}
		}
	}
</script>

<style>
	.container {
		background-color: #F7F6F6;
	}

	#subsection {
		top: 88rpx !important;
	}

	.main {
		border-radius: 20rpx 20rpx 0 0;
		transform: translateY(-10rpx);
		padding: 30rpx 20rpx;
	}
</style>
